<template>
  <div>
    <nav class="nav" ref="nav">
      <div class="container">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          background-color="#202329"
          text-color="#fff"
          active-text-color="#5FD8C7"
        >
          <el-menu-item class="badge">
            <el-image
              style="width: 140px; height: 60px"
              :src="url">
            </el-image>
          </el-menu-item>
          <el-menu-item>
            <i class="el-icon-location-information location"></i>
            <span class="chongqing">重庆</span>
            <span class="switch_city" @click="open">
            [切换城市]
          </span>
          </el-menu-item>
          <el-menu-item index="1">首页</el-menu-item>
          <el-submenu index="2">
            <template slot="title">职位</template>
            <el-menu-item index="2-1">选项1</el-menu-item>
            <el-menu-item index="2-2">选项2</el-menu-item>
            <el-menu-item index="2-3">选项3</el-menu-item>
            <el-submenu index="2-4">
              <template slot="title">选项4</template>
              <el-menu-item index="2-4-1">选项1</el-menu-item>
              <el-menu-item index="2-4-2">选项2</el-menu-item>
              <el-menu-item index="2-4-3">选项3</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-menu-item index="3">
            <el-badge value="new" class="item">
              校园
            </el-badge>
          </el-menu-item>
          <el-menu-item index="4">
            <a href="#" target="_blank">公司</a>
          </el-menu-item>
          <el-menu-item index="5">App</el-menu-item>
          <el-menu-item index="6">资讯</el-menu-item>
          <el-menu-item index="7" class="specially">消息</el-menu-item>
          <el-menu-item index="8">简历.上传</el-menu-item>

          <el-dropdown>
          <span class="el-dropdown-link">
            <el-menu-item index="9" class="person">周静</el-menu-item>
          </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-plus">个人中心</el-dropdown-item>
              <el-dropdown-item icon="el-icon-circle-plus">账号设置</el-dropdown-item>
              <el-dropdown-item icon="el-icon-circle-plus-outline">隐私设置</el-dropdown-item>
              <el-dropdown-item icon="el-icon-check">求职助手</el-dropdown-item>
              <el-dropdown-item icon="el-icon-circle-check">退出登陆</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

        </el-menu>
      </div>
    </nav>
    <div class="line"></div>
    <!--    遮罩层----------->
    <div :class="{'mask_layer': mask_layer, active: active}">
      <div :class="{box: true}">
        <div class="title">
          <h4>城市选择</h4>
          <div class="text">切换城市分站，寻找当地心仪工作</div>
          <i class="el-icon-close layer_close" @click="close"></i>
        </div>
        <div class="content"></div>
      </div>
    </div>
    <!-- /-->
  </div>
</template>

<script>
export default {
  name: 'Nav',
  data () {
    return {
      activeIndex: '1',
      url: 'https://www.wanzhoujob.com/default/images/logo/logo1.png',
      mask_layer: true,
      active: false
    }
  },
  methods: {
    handleSelect () {
    },
    open () {
      this.active = true
    },
    close () {
      this.active = false
      console.log(1)
    }
  }
}
</script>

<style lang="scss" scoped>
.nav {
  width: 100%;
  top: 0;
  z-index: 10;
  background-color: #000;
}

.location {
  font-size: 20px;
}

.chongqing {
  color: #5fd8c7;
}

.switch_city {
  margin-left: 10px;
  color: #ffffff;
}

::v-deep .el-badge__content.is-fixed {
  position: absolute;
  top: 14px;
  right: 16px;
  transform: translateY(-50%) translateX(100%);
}

.mask_layer {
  width: 100%;
  height: 100%;
  background-color: rgba(37, 40, 48, .7);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 15;
  transition: .3s linear;
  display: none;

  .box {
    position: relative;
    width: 600px;
    height: 600px;
    background-color: #ffffff;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    /*transition: .4s linear;*/
    z-index: 5;

    .title {
      display: flex;
      align-items: center;
      background-color: #5dd5c8;
      position: relative;
      padding: 10px;
      color: #ffffff;

      h4 {
        margin: 0 10px 0 30px;
        font-size: 16px;
      }

      .text {
        font-size: 12px;
      }

      .layer_close {
        cursor: pointer;
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }
}

.mask_layer_switch {
  visibility: visible;
  display: none;
}

.active {
  display: block;
}

.person:hover {
  .dropdown {
    display: block;
  }
}

.specially {
  margin-left: 130px;
}

.dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  width: 234px;
  background-color: #ffffff;

  a {
    display: block;
    padding-left: 10px;
    color: #000000;

    &:hover {
      background-color: #f8f9fb;
    }
  }
}

</style>
